<template>
  <div>
    <ul class="payment-list clearfix" :class="ulClass">
      <li :class="activeIndex === 'alipay' ? 'active' : ''">
        <img
          :src="require('@/assets/images/pay/alipay.d834fcda.png')"
          @click="changeMethods('alipay')"
          alt="alipay"
        />
      </li>
      <li :class="activeIndex === 'weixin' ? 'active' : ''">
        <img
          :src="require('@/assets/images/pay/weixin.8f9c6e77.png')"
          alt="weixin"
          @click="changeMethods('weixin')"
        />
      </li>
    </ul>
    <!-- WEIXIN -->
    <m-dialog class="dialog"  :show-dialog.sync="isCodeUrl" width="400px" title="微信支付">
      <div class="qrCodeUrl" v-if="code_url" ref="qrCodeUrl"></div>
      <div class="msg">请使用 <span style="color:#ff6700;cursor: pointer;">微信</span>	扫一扫 <br> 二维码完成支付</div>
      <!-- 用户决定是否完成了支付 -->
      <div>
        <h3 class="title">是否已完成支付?</h3>
        <div class="btns">
        <p @click="getHavePayCheck">已支付</p>
        </div>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2"
import MDialog from "@/components/common/m-dialog/MDialog"
import {
  isHavePayCheck
} from "@/request/api"
  export default {
    components: {
      MDialog,
    },
    props: {
      ulClass: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        activeIndex: '',//当前支付方式
        code_url:'' ,//微信支付二维码
        isCodeUrl:false, //显示微信支付
        group_order_id:'', //支付id
        qr:null //二维码对象
      }
    },
    methods: {
      // 选择支付方式
      changeMethods(code) {
        this.activeIndex = code
        this.$emit('changeMethods',code)
      },
      // 支付宝支付
      zfbPay(url) {
        const a = document.createElement('a')
        a.target = '_blank'
        a.href = url
        a.click()
      },
      // 微信支付
      wxPay(result) {
        this.code_url = result.config.code_url
        if(this.code_url !== null) this.isCodeUrl = true
        this.group_order_id = result.group_order_sn
        this.$nextTick(() => {
          this.creatQrCode()
        })
      },
        // 生成支付二维码
      creatQrCode() {
        if(this.qr) {
          this.qr.clear(); // 清除代码
          this.qr.makeCode(this.code_url); // 重新生成二维码
        }else {
          this.qr = new QRCode(this.$refs.qrCodeUrl, {
            text: this.code_url,
            width: 150,
            height: 150,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
          })
        }
      },
       // 检查是否支付成功
      getHavePayCheck() {
        isHavePayCheck({group_order_sn: this.group_order_id}).then(res => {
          if(res.code === 200) {
            this.$message.success(res.message || '支付成功！')
            setTimeout(() => {
              this.$router.push({
                path: "/category/paySuccess",
                query: { order_id: res.data.result.group_order_id },
              })
            }, 500)
            // 支付成功或手动关闭 才关闭  否则又要创建一次
            this.isCodeUrl = false
          }else {
            // 避免用vant的toast组件  会出现模态框的层级问题
            this.$message.error(res.message)
          }
        }).catch(err => {
          this.$message.error(err.message)
          // this.isCodeUrl = false
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
.payment-list {
        margin-top: 15px;
        // padding-bottom: 40px;
        position: relative;

        li,
        li img {
          width: 173px;
          height: 59px;
        }

        li {
          float: left;
          margin-right: 14px;
          border: 1px solid #e7e7e7;
          list-style: none;
          cursor: pointer;
        }
        li:last-child {
          margin-right: 0;
        }

        li.active {
          border: 1px solid #e38b2e;
        }
      }

      .clearfix:before {
        content: " ";
        display: table;
      }
      .dialog{
  text-align: center;
  /deep/ .el-dialog__body {
    padding: 10px !important;
  }
  .qrCodeUrl {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 170px;
      height: 170px;
      margin: 10px auto;
  }
  .title{
    color: #e38b2e;
    font-weight: 400;
    font-size: 16px;
    margin: 10px 0;
  }
  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      width: 150px;
      height: 30px;
      line-height: 30px;
      margin: 0 10px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e38b2e;
    }
    p:nth-child(1) {
      border: 1px solid #e38b2e;
      color: #fff;
      background: #e38b2e;
      cursor: pointer;
    }
  }
}
</style>